<template>
	<Modal v-model="modal" @on-ok="ok('form')" :loading="loading" title="更新权限">
		<IForm :model="form" ref="form" :label-width="100" :rules="formRule" >
	        <FormItem prop="name" label="权限路径">
	            <IInput v-model="form.name" size="large" placeholder="权限,模块权限请去除admin/前缀" clearable />
	        </FormItem>
	        <FormItem prop="displayName" label="权限中文名称">
	            <IInput v-model="form.displayName" size="large" placeholder="权限中文名称" clearable />
	        </FormItem>
	        <FormItem prop="description" label="描述">
	            <IInput v-model="form.description"  type="textarea" :autosize="{minRows: 5,maxRows: 10}" size="large" placeholder="权限描述" clearable />
	        </FormItem>
	    </IForm>
	</Modal>
</template>
<script>
import {Modal,Form,Input,Button} from 'iview';

export default {
	props:{
        callback:{ type : Function}
    },
	components:{
        Modal,
        'IInput' : Input,
		'IForm' : Form,
		'FormItem' : Form.Item,
		'IButton' : Button,
    },
    data () {
    	const validateName=(rule , value ,callback)=>{
			if(value.indexOf('admin')==0 || value.indexOf('#')>=0){
				callback(new Error('请去除admin/#/前缀'));
			}
            var pathArr = value.split('/');
            if(pathArr[0]==''){
                callback(new Error('请填写格式正确的路径'));
            }
            var reg = /^[A-Za-z]+$/;
            for(var i in pathArr){
                if(!reg.test(pathArr[i])){
                    callback(new Error('请填写合法路径名'));
                }
            }
            this.Axios.Config.Permission.CheckName({name:value,id:this.form.id})
            .then(res =>{
            	if(!res){
            		callback(new Error('路径已存在'));
            		return false;
            	}
                callback();
            })
        };
        const validateDisplayName=(rule , value ,callback)=>{
            var reg = /^[\u4E00-\u9FA5\-]+$/;
            if(!reg.test(value)){
                callback(new Error('请填写中文名,只能填写-特殊符号'));
            }
            callback();
        };
        return {
            modal: false,
            loading : true,
            form :{
            	id : 0,
            	name : '',
            	displayName  : '',
            	description  : '',
            },
            formRule : {
                name: [
                    { required: true, message: '请填写权限路径', trigger: 'blur' },
                    { validator: validateName, trigger: 'blur'}
                ],
                displayName: [
                    { required: true, message: '请填写权限中文名,多模块以-分开', trigger: 'blur' },
                    { validator: validateDisplayName, trigger: 'blur'}
                ]
            },
        }
    },
    methods: {
        changeLoading(){
            this.loading = false;
            this.$nextTick(() => {
              this.loading = true;
            });
        },
    	ok(name){
    		this.$refs[name].validate(valid => {
    			if (!valid) {this.changeLoading();return false;}
    			this.Axios.Config.Permission.Update(this.form)
	            .then(res =>{
	            	this.changeLoading();
	            	if(!res) return false;
	                this.modal = false;
	                this.callback();
	            })
    		})
    	},
    },
    watch:{
    	modal(newValue,oldValue){
    		if(!newValue){
    			this.form.id = 0;
    			this.$refs.form.resetFields();
    		}
    	}
    }
}
</script>